"use strict";
let ProductList = React.createClass({
    getInitialState: function () {
        return {data: []};
    },

    componentDidMount: function () {
        $.get(this.props.url, function (data) {
            if (this.isMounted()) {
                this.setState({data: data});
            }
        }.bind(this));
    },

    render: function () {
        return (
            <div className="products">
                {this.state.data.map(function (item) {
                    return (
                    <div className="productList">
                    <img  src={item.src} alt={item.alt}/>
                    <p className="price">Price:{item.price}</p>
                    <button >Buy Online</button>
                    </div>
                    )
                })}
            </div>
        );
    }
});
React.render(
    <Layout>
        <ProductList url="data/products.json"/>
   </Layout>,
   document.getElementById('app')
);